<template>
    <div class="view">
        <div class="logo">
            <img src="@/assets/image/logo-1024.png"/>
        </div>

        <div class="list">
            <form>
                <div class="list-item">
                    <cube-input v-model="account" :clearable="true" placeholder="手机号/邮箱/会员名" @blur="inputBlur">
                    </cube-input>
                </div>
                <div class="list-item">
                    <cube-input v-model="password" type="password" :eye="eye" placeholder="请输入密码" @blur="inputBlur">

                    </cube-input>
                </div>
            </form>

            <div class="other">
                <a>学生绑定</a>
                <a>忘记密码</a>
            </div>
            <div class="btn">
                <div class="submit" @click="login">登 录</div>
            </div>
            <div class="new-user" @click="toRegister">
                新用户？点击这里注册
            </div>
            <div class="authentication">
                <div class="icon"><i class="iconfont icon-weixin weixin"></i></div>

            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Model} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";


    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({})
    export default class Login extends Scene {
        private clearable: object = {
            visible: true,
            blurHidden: true
        };
        private eye: object = {
            open: false,
            blurHidden: true
        };

        private account: string = "";
        public password: string = "";

        @State("UserStore")
        private user!: InterfaceUser;

        private inputBlur(): void {
            CommonUnit.windowSizeRecover();
        }

        private toRegister():void{
            this.redirectTo({
                name:'register'
            })
        }

        private async login(): Promise<any> {
            CommonUnit.windowSizeRecover();
            let toast = (<any> this).$createToast({
                txt: "登录中，请稍后...",
                mask: true,
                time: 0
            });
            toast.show();
            const loginRes = await Http.post(this.api.login, {mobile: this.account, pswd: this.password});
            if (!loginRes.Success) {
                // toast.hide();
                toast = (<any> this).$createToast({
                    txt: `登录失败：${loginRes.Message}`,
                    mask: true,
                    type: "error",
                    time: 1500
                });
                toast.show();
            } else {
                updateUser(loginRes.Data);
                toast = (<any> this).$createToast({
                    txt: `登录成功！！3秒后返回上一个页面`,
                    mask: true,
                    type: "correct",
                    onTimeout: () => {
                        this.redirectTo({path: this.$route.query["redirect"]});
                    }
                });
                toast.show();
            }
        }

    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .view
        padding-top env(safe-area-inset-top);
        min-height 100vh;
        overflow hidden;

    .logo
        width 80px;
        height 80px;
        margin 47px auto 0 auto;

        img
            width 80px;
            height 80px;


    .list
        margin auto 23px;

        .list-item
            margin-top 40px;
            height 41px;
            border-bottom 1px solid #ff5000;

            >>> .cube-input
                font-size 16px
                height 39px;
                overflow hidden;

                &::after
                    border none;

    .other
        margin auto
        margin-top 22px
        height 14px
        width 329px
        justify-content space-between
        display flex

        a
            color #555
            font-size 14px

    .btn
        margin auto
        margin-top 35px
        display flex
        flex-flow row nowrap
        justify-content space-between
        position relative

        .submit
            background $theme-common-gradient
            color #fff
            line-height 45px
            height 45px
            border-radius 45px
            font-size 16px
            width 100%
            text-align: center;
            box-shadow: 0 3px 6px #f7c7b1;

    .new-user
        margin-top 15px;
        font-size 15px;
        color #000;
        text-align center;
        height 25px;
        line-height 25px;

    .authentication
        display flex
        flex-direction row;
        justify-content space-between;
        margin 20px auto
        width 229px

        .icon
            flex 1;
            text-align center
            border-radius 40px
            line-height 40px
            color #fff


            i
                font-size 26px;
                display block;
                width 40px
                height 40px
                border-radius 40px
                margin auto;

        .weixin
            background $theme-weixin-default;

</style>
